<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>filters过滤器的使用</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
        {{date | formatDate}}
        <!-- {{date | formatDate | reverseText}} -->
        {{text | reverseText(",")}}
        <!-- 过滤器可以重叠也可以传参 -->
        <p v-html="html"></p>
        <p v-pre>
            {{aa}}
        </p>   
        <!-- v-pre  写啥输出啥    -->
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                date:"",
                closeTimer:null,
                text:"123,456,789",
                html:"<a href='http://www.baidu.com'>baidu</a>"  //想要获取链接必须要给一个标签属性
            },
            filters:{
                formatDate(value){
                    console.log(value);
                    let oDate = new Date(value)
                    let year = oDate.getFullYear()
                    let month = oDate.getMonth()+1
                    let day = oDate.getDate()
                    let hours = oDate.getHours()
                    let minutes = oDate.getMinutes()
                    let seconds = oDate.getSeconds()
                    return year +'-'+month+'-'+day+' '+hours+':'+minutes+':'+seconds
                },
                reverseText(value,str){    //str是第1参数，value也就是data第0个参数
                    // return value.split("，").reverse().join("，")
                    // return value.split(" ").reverse().join(" ")//逆序
                    return value.split(str).reverse().join(str)
                }
            },
            mounted(){
                this.closeTimer = setInterval(()=>{
                    this.date = new Date()
                },1000)
            }
        })
    </script>
</body>
</html>